<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>themes-Home</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
    <header>
        <div class="container">
            <div class="nav-left">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="#">
                        <img src="img/brand-white.png" alt="">
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link nav-1" href="#">Home <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Messages</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Docs</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </header>
    <main>
        <div class="container">
            <div class="main-1 main-left mt-4">
                <div class="row jj3">
                    <div class="item1">
                        <div class="main-left-top">
                            <div class="card">
                                <img src="img/iceland.jpg" alt="" class="img1">
                                <div class="bg-i">
                                <img src="img/main-3-img3.png" alt="" class="img2">
                                </div>
                                <div class="card-body text-center mt-4">
                                    <h3 class="h4">Dave Gamache</h3>
                                    <p class="card-text">I wish i was a little bit taller,wish i was a baller.</p>
                                </div>
                            </div>
                        </div>
                        <div class="main-left-middle mt-4">
                            <h4 class="h5">About</h4>
                            <p class="p1"><a href="" class="a1">Went to </a><a href="" class="a2">Oh,Canada</a></p>
                            <p class="p1"><a href="" class="a1">Became friends with </a><a href="" class="a2">Obama</a></p>
                            <p class="p1"><a href="" class="a1">Worked at </a><a href="" class="a2">Github</a></p>
                            <p class="p1"><a href="" class="a1">Lives in </a><a href="" class="a2">San Francisco,CA</a></p>
                            <p class="p1"><a href="" class="a1">From </a><a href="" class="a2">Seattle,WA</a></p>
                        </div>
                        <div class="main-left-bottom mt-4">
                            <h4 class="h5">Photos</h4>
                            <a href=""><img src="img/instagram_5.jpg" alt=""></a>
                            <a href=""><img src="img/instagram_6.jpg" alt=""></a>
                            <a href=""><img src="img/instagram_7.jpg" alt=""></a>
                            <a href=""><img src="img/instagram_8.jpg" alt=""></a>
                            <a href=""><img src="img/instagram_9.jpg" alt=""></a>
                            <a href=""><img src="img/instagram_10.jpg" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-2-m mt-4">
                <div class="main-2 main-middle">
                    <div class="row jj1">
                        <div class="item2">
                            <div class="main-middle-1">
                                    <h3 class="h3 pt-4">Dave Gamache</h3>
                                    <span class="span">4 min</span>
                                    <p>Aenean lacinia bibendum nulla sed consectetur.Vestibulum id ligula porta felis
                                    euismod semper.Morbi leo risus,porta ac consectetur ac,vestibulum at eros.Cras
                                    justo odio,daplbus ac facilisis in,egestas eget quam.Vestibulum id ligula porta felis
                                    euismod semper.Cum sociis natoque penatibus et magnis dis parturient montes,
                                    nascetur ridiculus mus.</p>
                                <div class="main-middle-1-b">
                                    <div class="main-middle-b-m clearfix">
                                        <div class="main-m-l">
                                            <a href=""><img src="img/unsplash_1.jpg" alt=""></a>
                                        </div>
                                        <div class="main-m-r">
                                            <a href=""><img src="img/instagram_1.jpg" alt="" class="img1"></a>
                                        </div>
                                    </div>
                                    <div class="main-middle-b-s clearfix">
                                        <div class="main-m-l s-l">
                                            <a href=""><img src="img/instagram_13.jpg" alt="" class="img2"></a>
                                        </div>
                                        <div class="main-m-r s-r">
                                            <a href=""><img src="img/unsplash_2.jpg" alt=""></a>
                                        </div>
                                    </div>
                                    <ul class="nav3">
                                        <li class="li-1"><p><span class="h5">Jacon Thornton:</span><span class="sp-1">Donec id non mi porta givida at eget metus.Vivamus sagittis
                                        lacus vel augue laoreet faucibus dolor auctor.Donec ullamcorper nulla non
                                        metus auctor fringilla.Prasent commodo cursus magna,vel scelerisque nisl
                                        consectetur et.Sed posuere consectetur est at lobortis.</span></p></li>
                                        <li><p><span class="h5">Mark Otto:</span><span class="sp-1">Lorem ipsum dolor sit amet,consectetur adipiscing slit.Fusce dapibus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa
                                        justo sit amet risus.</span></p></li>
                                    </ul>
                                    </div>
                            </div>
                        <div class="main-middle-2">
                                <h3>Jacob Thornton</h3>
                                <span class="span">12 min</span>
                                <p class="sp-1">Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante
                                venenatis dapibus posuere velit aliquet.Cum sociis natoque penatibus et magnis
                                dis parturient montes,nasetur ridiculus.Morbi leo risus,porta ac consectetur
                                ac vestibulum at eros.Lorem iprem dolor sit amet,consectetur adipiscing slit.</p>
                        </div>
                        <div class="main-middle-3">
                                <h3>Mark Otto</h3>
                                <span class="span">34 min</span>
                                <p class="sp-1">Donec ullamcorper nulla non metus auctor fringilla.Vestibulum id porta felis
                                euismod seper.Aenean eu leo quam.Pellentesque ornare sem lacinia quam
                                venenatis vestibulum.Etiam porta sem malesuada magna mollis euismod.Donec
                                sed odio dui.</p>
                                <a href=""><img src="img/instagram_3.jpg" alt=""></a>
                                <ul class="nav4">
                                    <li><p><span class="h5">Dave Gemache:</span><span class="sp-1">Donec id elit non mi porta gravida at eget metus.Vivamus sagittis
                                    lacus vel augue laoreet rutrum faucibus dolor auctor.Donec uliamcorper nulla non
                                    metus auctor fringilla.Praesent commodo cursus magna.vel sceierisque nisl
                                    consectetur et.Sed posuere est at lobortis.</span></p></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-3 main-right mt-4">
                <div class="row jj2">
                        <div class="item3">
                            <div class="main-right-top">
                                <h3>Sponsored</h3>
                                <img src="img/instagram_2.jpg" alt="">
                                <h3 class="h3 mt-2">It might be time to visit lceland.</h3>
                                <p>lceland is so chill,and everything
                                looks cool here.Also,we heard the
                                people are pretty nice.What are you
                                    waiting for?</p>
                                <a href="">Buy a ticket</a>
                            </div>
                            <div class="main-right-bottom mt-4">
                                <div class="main-right-bottom-t">
                                    <h3>Likes</h3>
                                </div>
                                <div class="main-right-bottom-m clearfix">
                                    <div class="main-right-m-left">
                                        <ul>
                                            <li><img src="img/main-right-img1.png" alt=""></li>
                                            <li class="li-1 mt-4"><img src="img/main-right-img2.png" alt=""></li>
                                        </ul>
                                    </div>
                                    <div class="main-right-m-right">
                                        <ul class="nav5">
                                            <li><span class="h4">Jacob Thorbton</span><span>@fat</span></li>
                                            <li class="li-1 mt-2"><a href="">Follow</a>
                                                <img src="img/index.png" alt=""></li>
                                            <li class="li-2"><span class="h4">Mark Otto</span><span>@mdo</span></li>
                                            <li class="li-1 mt-2">
                                                <a href="">Follow</a>
                                                <img src="img/index.png" alt="">
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="main-right-bottom-b">
                                <p>Dave really likes these nerds,no one
                                    knows why though.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </main>
    <footer>
        <div class="container text-center">
            <p>Designed and built with all the love in the world by<a href="">@mdo</a>,<a href="">@fat</a>,and
                <a href="">@dhg.</a></p>
            <ul class="nav6 clearfix">
                <li><a href="">About</a></li>
                <li><a href="">Terms</a></li>
                <li><a href="">Privacy</a></li>
                <li><a href="">Licenses</a></li>
                <li><a href="">FAQ</a></li>
            </ul>
        </div>
    </footer>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>